<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hyper Editor</title>
  <link rel="shortcut icon" href="https://divineitlimited.github.io/hyper-editor/icon.png" />
  <link rel="stylesheet" href="https://unpkg.com/hyper-editor@0.1.0/dist/hyper_editor.css" />
  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
  <style>
    .editor-wrapper {
      margin: 20px;
      background: #fff;
      padding: 10px;
    }
    body {
      background: #efefef
    }
    .nav-wrapper {
      margin: 20px;
      padding: 10px;
      text-align: right;
    }
    .nav-wrapper a {
      margin-left: 20px
    }
  </style>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-137880580-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-137880580-1');
  </script>

</head>
<body>
  <div class="nav-wrapper">
    <a href="https://github.com/DivineITLimited/hyper-editor">Github</a>
    <a href="https://divineitlimited.github.io/hyper-editor/">Documentation</a>
  </div>
  <div class="editor-wrapper">
    <div id="hyperEditor"></div>
  </div>
  <script type="text/javascript" src="https://unpkg.com/hyper-editor@0.1.0/dist/hyper_editor.js"></script>
  <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

  <script>

    var DATA_API = 'https://divineitlimited.github.io/hyper-editor/data.json'
    var IMAGE_API = 'https://divineitlimited.github.io/hyper-editor/images.json'

    document.addEventListener('DOMContentLoaded', function(){

      // Create Hyper Editor
      var hyperEditor = new HyperEditor('#hyperEditor', {
        imageSearchApi: 'http://localhost:8000/hyper-editor/api/images/',
        blocks: {
          image: {
            getImages: function(apiUrl, q, page, callback) {
              fetch(IMAGE_API)
                .then(res => res.json())
                .then(res => callback(res))
            }
          }
        }
      })

      // Initialize Hyper Editor from existing data
      fetch(DATA_API)
        .then(res => res.json())
        .then(res => hyperEditor.initialize(res))

    })
  </script>
</body>
</html>
